<template>
	<div>
		<el-dialog v-model="dialogVisible" title="设置邀请奖励" width="50%" draggable overflow :before-close="handleClose">
			<el-form ref="formRef" :model="state.dataForm">
				<el-form-item label="分销商" required></el-form-item>
				<el-form-item label="销售任务" required>
					<div class="task_box">
						<div>
							<el-checkbox-group v-model="checkList">
								<el-checkbox label="Option A" value="Value A" v-for="i in 3" :key="i">
									<template #default>
										<div class="label_box">
											<div class="txt">第一阶梯：邀请分销商累计分销业绩</div>
											<el-input v-model="amount" class="input"></el-input>
											<div class="txt">元，奖励合伙人</div>
											<el-input v-model="percent" class="input"></el-input>
											<div class="txt">%的销售金额</div>
										</div>
									</template>
								</el-checkbox>
							</el-checkbox-group>
						</div>
						<div>
							<p>限分销商1个自然月内的销售金额</p>
						</div>
					</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="handleClose">取消</el-button>
					<el-button type="primary" @click="handleSubmit"> 保存 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
  
  <script setup>
import { reactive, ref, defineExpose } from 'vue'

const state = reactive({
	dataForm: {}
})
const formRef = ref()
const dialogVisible = ref(false)
const checkList = ref([])
const amount = ref()
const percent = ref()

const handleClose = () => {
	dialogVisible.value = false
}

const handleSubmit = () => {
	dialogVisible.value = false
}
const open = () => {
	dialogVisible.value = true
}

defineExpose({
	open
})
</script>
  
  <style scoped lang='scss'>
.el-checkbox-group {
	display: flex;
	flex-direction: column;
}
:deep(.el-form-item__label) {
	color: #909399;
}
.task_box {
	display: flex;
	flex-direction: column;
}
.label_box {
	display: flex;
	align-items: center;

	.txt {
		color: #606266;
		font-size: 14px;
	}
	.input {
		width: 100px;
		height: 26px;
		margin: 0 5px;
	}
}
</style>